<template>
  <!-- 保持原有的模板部分不变 -->
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { message } from 'ant-design-vue'
import { 
  UserOutlined,
  PlusOutlined,
  EyeOutlined,
  EditOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue'

// 保持原有的数据和方法定义不变，添加新的方法

// 处理图片上传
const handleCustomUpload = ({ file, onSuccess, onError }) => {
  // 这里应该调用后端API上传图片
  // 示例中使用本地URL模拟
  try {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      const url = reader.result
      onSuccess({ url })
      examinationForm.image = url
    }
  } catch (error) {
    onError(error)
  }
}

// 处理模态框取消
const handleModalCancel = () => {
  fileList.value = []
  examinationModalVisible.value = false
}

// 处理表单提交
const handleExaminationSubmit = (values) => {
  const formData = { ...values }
  
  if (modalTitle.value === '新建检查项目') {
    // 新建检查项目
    formData.id = examinations.value.length + 1
    examinations.value.push(formData)
    message.success('新建成功')
  } else {
    // 编辑检查项目
    const index = examinations.value.findIndex(item => item.id === currentExamination.value.id)
    if (index !== -1) {
      examinations.value[index] = { ...examinations.value[index], ...formData }
      message.success('更新成功')
    }
  }
  
  examinationModalVisible.value = false
  fileList.value = []
}
</script>

<style scoped>
.examinations-layout {
  min-height: 100vh;
}

.header {
  background: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 48px;
}

.logo img {
  height: 32px;
  margin-right: 8px;
}

.logo span {
  font-size: 18px;
  font-weight: 600;
  color: #1890ff;
}

.header-menu {
  flex: 1;
}

.header-right {
  margin-left: auto;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.85);
}

.content {
  padding: 24px;
  background: #f0f2f5;
}

.page-header {
  background: #fff;
  padding: 16px 24px;
  border-radius: 4px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.page-content {
  background: #fff;
  padding: 24px;
  border-radius: 4px;
}

.category-section {
  margin-bottom: 24px;
}

.examination-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.examination-image {
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.examination-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.examination-info {
  margin-top: 8px;
}

.examination-info .description {
  margin-bottom: 8px;
  color: rgba(0, 0, 0, 0.45);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.examination-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.examination-price .price {
  font-size: 16px;
  font-weight: 500;
  color: #f5222d;
}

.card-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.examination-detail {
  .detail-image {
    height: 300px;
    margin-bottom: 24px;
    border-radius: 4px;
    overflow: hidden;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .detail-info {
    h3 {
      margin: 0 0 16px;
      font-size: 24px;
      font-weight: 600;
    }
    
    .category {
      margin-bottom: 16px;
    }
    
    .price {
      font-size: 24px;
      font-weight: 500;
      color: #f5222d;
      margin-bottom: 24px;
    }
    
    .description {
      h4 {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 8px;
      }
      
      p {
        color: rgba(0, 0, 0, 0.65);
        line-height: 1.8;
      }
    }
  }
}
</style>